iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
1
Modern Web

JS讀書筆記系列 第 9

JS讀書筆記30天 - Day09 事件

  • 分享至 

  • xImage
  •  

什麼是事件?

但凡點擊、滑鼠、滾輪、鍵盤、伸縮視窗、表單⋯⋯在某個觸發點被觸動時,產生反應,就是事件。

事件在平時是不做任何動作的——不管畫面看不看得到,只有觸發點被觸發了,才做動作,執行寫在事件內的程式碼。

事件的存在,主要是跟使用者產生互動,讓使用者體驗更好。

事件的寫法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="button" value="send" />
  </body>
</html>

畫面上有一個寫著Send的按鈕。

現在為這顆按鈕綁定事件,這個動作叫作註冊監聽

事件有很多種類,點擊事件中常見的有兩種,以上面程式碼為例來做說明:

onclick

畫面元素.onclick = function(){
  //執行程式碼
}

先選定要被綁定事件的元素,接著一個半形句號(.)後接onclick,要特別注意的是,onclick`後面的函式不用命名。

var btn = document.querySelector("input");
btn.onclick = function(){
  alert("Click the button.");
}

先用querySelector()選取按鈕,再為按鈕綁定事件。

綁定事件後,在函式中放入觸發事件時,要執行的程式碼。

addEventListener()

畫面元素.addEventListener("動作", function(){
  //執行程式碼
}, false);

這種寫法,addEventListener()後的小括弧要傳入3個參數,動作、函式、false,其中函式不需要命名。

另外,這段程式碼的最後,不要忘記加半形分號(;)。

var btn = document.querySelector("input");
btn.addEventListener("click", function(){
  alert("Click the button.");
}, false);

要特別注意的是,在這種寫法中,點擊的程式碼是click,不是onclick

onclickaddEventListener()差異

onclick一次只能綁定一個事件,這是比較舊的點擊事件,現在還能常常看見。

由於只能綁定一個事件,所以當綁定兩個以上的事件時,會把之前的事件覆蓋掉,靈活度較低。

addEventListener是新出來的方法,可以同時綁定多個事件,而且不會把之前的事件覆蓋掉,也是常見的點擊事件。

利用Chrome的開發者工具處理事件

Chrome的開發者工具中,Element面板下的Event Listeners面板可以查看事件是否綁定成功,還有事件的種類。

螢幕快照 2020-09-24 下午9.51.40

只要進入面板後,點選綁定事件的元素,就可以看到結果。


上一篇
JS讀書筆記30天 - Day08 DOM
下一篇
JS讀書筆記30天 - Day10 Local Storage
系列文
JS讀書筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言